$(function () {

    //在这里写页面逻辑
    //1 获取文章类别 调用模板引擎进行渲染



    function init() {
        $.ajax({
            url: bignews.category_list,
            success(res) {
                //调用模板引擎
                //结合模板和数据生成HTML字符串
                let htmlStr = template('cateTemp', res)
                console.log(res);
                $('tbody').html(htmlStr)
            }
        })

    }
    init()


    // 2.监听新增按钮的点击事件 增加分类
    $('#btn-opt').on('click', function () {

        const name = $('#cateName').val()
        const slug = $('#cateSlug').val()


        //判断一下当前状态 新增/修改不同的接口
        if ($(this).text() == '新增') {
            $.ajax({
                type: 'post',
                url: bignews.category_add,
                data: {
                    name,
                    slug
                },

                success: function (res) {
                    console.log(res);
                    // 一旦发布成功，
                    // 1关闭模态款
                    $('#myModal').modal('hide')
                    //直接刷新也是可以的 ，不过页面会闪一下
                    // window.location.reload()
                    // 2.清空表单
                    //重置表单
                    $('#myForm')[0].reset()
                    //页面重新刷新
                    init()
                }
            });
        } else {
            //发送修改的请求
            $.ajax({
                type: "post",
                url: bignews.category_edit,
                data: {
                    name,
                    slug,
                    id: $('#cateId').val()
                },

                success: function (res) {
                    console.log(res);
                }
            });
        }


    })


    //3.处理删除按钮
    $('tbody').on('click', '#btn-del', function () {
        console.log('点击');

        //我们在遍历生成分类的时候
        //已经把当前的id赋值给了 data -id
        // 1.原生的方法
        // dom.dataset.id
        // 2.jq获取方法
        // $(this).data('id')
        console.log('id=', $(this).data('id'))

        $.ajax({
            type: 'post',
            url: bignews.category_delete,
            data: {
                id: $(this).data('id')
            },
            // success(res) {
            //     console.log(res);
            //     // 这里删除成功响应并不是 200
            //     //我们希望 2开头的三位数  都算成功
            //     //正则对象 有一个test 函数可以晓验一个字符串是否符合要求
            //     const reg = /^2\d{2}$/
            //     if (reg.test(res.code)) {
            //         //删除成功
            //         init();
            //     }
            // }
        });
    })

    //4.修改分类操作
    $('tbody').on('click', '#btn-edit', function () {
        console.log('点击编辑的阿妞');

        //这里点击的编辑按钮 
        //弹出模态框
        //由于是跟新增公用一个的
        $('#myModalLabel').text('编辑分类')
        $('#btn-opt').text('编辑')

        //拿出去赋值给输入框
        $('#cateName').val($(this).data('name'))
        $('#cateSlug').val($(this).data('slug'))
        $('#cateId').val($(this).data('id'))


        $('myModal').modal('show')
    })

    //5我们需要每次新增的时候 模态款是最原始的状态
    $('myModal').on('hidden.bs.modal', function () {
        // 1.回复标题
        $('#myModalLabel').text('新增分类')
        // 2.恢复按钮
        $('#btn-pot').text('新增')
        // 3.清空表单
        $('#myForm')[0].reset();


    })
})